<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
  <h1>拦截器的练习</h1>
  <input type="text">
  <button type="submit">提交请求</button>
  <script>
    //获取节点
    const oIpt = document.querySelector('input')
    const oBnt = document.querySelector('button')

    //实例化axios 
    const myAxios = axios.create({
      //配置对象
      baseURL: '/', //配置公共路径
      timeout: 10000, //配置请求超时时间
      headers: {

      }, //配置发送的自定义请求头
    })
    /* 
    也是有两个回调函数处理成功或者失败
    拦截器中的回调函数类似于.then，then默认返回成功的状态的promise实列 值为回调函数return的值
    所以在拦截器中需要把值return出去，失败的话就return一个失败的promise实列，后面的catch会捕获这个失败的promise实列
    */
    // 添加请求拦截器
    myAxios.interceptors.request.use(function (config) {
      console.log(config); //这里的config拿到的就是配置对象
      return config; //如果不把这个值返回出去后台服务器拿不到数据，无法做下一步动作
    }, function (error) {
      //这里接收的是失败信息 如果直接把错误信息return出去，对于then来说还是成功状态的promise实列值只不过是失败信息，所以应该快速把错误信息快速包装成一个失败的promise实列return出去，后面就直接退出try 被catch捕获
      return Promise.reject(error);
    });

    // 添加响应拦截器
    myAxios.interceptors.response.use(function (response) {
      // 对响应数据做点什么
      console.log('response', response); //拿到后台响应的结果 把需要的东西返回出去就可以
      return response.data;
    }, function (error) {
      // 对响应错误做点什么
      return Promise.reject(error.message);
    });
    //绑定点击事件
    oBnt.onclick = async function () {
      //获取到输入框的值
      let oIptvalue = oIpt.value;
      //尝试执行
      try {
        //数据从这里出也是从这么进
        const result = await myAxios.get('/user', { //这里返回的是promise的实列 所以await可以等到拿到值
          //查询字符串
          params: {
            userId: `${oIptvalue}`
          }
        })
        console.log('result', result); //result {code: 10000, mes: '获取成功', data: null}
      } catch (e) {
        console.log(e);
      }
    }
  </script>
</body>

</html>